<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		let arr = [
			{ active: true, index: 0 },
			{ active: true, index: 1 },
			{ active: true, index: 2 },
			{ active: false, index: 3 },
			{ active: true, index: 4 },
			{ active: true, index: 5 },
			{ active: false, index: 6 },
			{ active: true, index: 7 },
			{ active: true, index: 8 },
			{ active: true, index: 9 },
			{ active: true, index: 10 },
		]

		function handle(arr) {
			let tempArr = [],
				index = 0
			for (let i = 0; i < arr.length; i++) {
				if (!arr[i].active) {
					tempArr.push(arr.slice(index, i))
					index = i + 1
				}
				if (i === arr.length - 1) {
					tempArr.push(arr.slice(index))
				}
			}

			for (let j = 0; j < tempArr.length; j++) {
				if (tempArr[j].length >= 3) {
					tempArr[j].splice(1, 1)
				}
				if (tempArr[j].length === 1) {
					tempArr[j].push(tempArr[j][0])
				}
			}

			// let newArr = []
			// for (let k = 0; k < tempArr.length; k++) {
			// 	newArr.push(...tempArr[k])
			// }

			return tempArr.flat()
		}

		handle(arr)

	</script>
</body>

</html>